<template>
  <section class="goods-header">
    <singleHeader :pageTitle="$t('admin.goodDetail')"></singleHeader>
    <view class="section-tab" v-show="!hideTopTab">
      <view
        class="tab-content"
        :style="[{ top: 'calc(' + statusBarHeight + 'px + 88rpx);' }]"
      >
        <view
          class="tab-item"
          :class="activeTab == index ? 'active-tab' : ''"
          v-for="(item, index) in tabList"
          :key="index"
          @click="handleTopTab(item, index)"
        >
          <view class="text">{{ item.text }}</view>
          <view class="active-line"></view>
        </view>
      </view>
      <!-- <view class="tab-hold-place"></view> -->
    </view>
    <div class="goods-swiper" :style="[goodsSwiperCss]">
      <swiper
        class="swiper"
        :autoplay="false"
        :touchable="true"
        :height="375"
        @change="swiperChange"
      >
        <swiper-item v-for="(item, index) in goodsInfo.pic_list" :key="index">
          <video
            id="myVideo"
            class="goods-video"
            :src="item.pic_url"
            v-if="item.type && item.type == 'video'"
            @error="videoErrorCallback"
            controls
          ></video>
          <image
            v-else
            :src="item.pic_url"
            alt=""
            mode="aspectFill"
            @click="previewPics(index)"
          ></image>
        </swiper-item>
      </swiper>
      <view class="swiper-length" v-if="goodsInfo.pic_list.length"
        >{{ swiperIndex + "/" + goodsInfo.pic_list.length }}
      </view>
    </div>
  </section>
</template>

<script>
import singleHeader from "@/components/diySystemPage/components/singleHeader/index.vue";
import { diySysPageMixin } from "@/components/diySystemPage/mixins/index.js";
export default {
  name: "",
  props: {
    propsData: {
      type: Object,
      default: {},
    },
    goodsInfo: {
      type: Object,
      default: {},
    },
    hideTopTab: {
      type: Boolean,
      default: true,
    },
    topTabActiveIndex: {
      type: Number,
      default: 0,
    },
  },
  mixins: [],
  components: {
    singleHeader,
  },
  mixins: [diySysPageMixin], //混入文件
  data() {
    return {
      swiperIndex: 1,
      tabList: [
        {
          id: "0",
          text: this.$t('goods.goods'),
        },
        {
          id: "goodsEvaluate",
          text: this.$t('goods.evaluate'),
        },
        {
          id: "goodsRichText",
          text: this.$t('goods.detail'),
        },
      ],
      activeTab: 0,
    };
  },
  mounted() {},
  watch: {
    topTabActiveIndex(val) {
      this.activeTab = val;
    },
  },
  computed: {
    goodsSwiperCss() {
      if (!this.propsData) return {};
      let style = Object.assign({}, this.propsData.params);
      if (style.margin) style.margin = `0 0 ${style.margin * 2}rpx 0`;
      let obj = {
        margin: style.margin,
      };
      return obj;
    },
  },
  methods: {
    videoErrorCallback(e) {

    },
    handleTopTab(item, index) {
      this.activeTab = index;
      this.$emit("scrollToNode", item);
    },
    // 点击预览图片
    previewPics(e) {
      let pics = this.goodsInfo.pic_list || [];
      let picArr = [];
      pics.forEach((item) => {
        picArr.push(item.pic_url);
      });
      uni.previewImage({
        current: e,
        urls: picArr,
        success() {
          uni.setStorageSync("usePreviewImgApi", "true");
        }
      });
    },
    swiperChange(e) {
      this.swiperIndex = Number(e.detail.current) + 1;
    },
  },
};
</script>

<style lang="scss" scoped>
.goods-header {
  width: 100%;
  .section-tab {
    width: 100%;
    .tab-content {
      width: 100%;
      height: 9.6vw;
      background: #ffffff;
      position: fixed;
      left: 0;
      z-index: 111;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .tab-item {
        flex: 1;
        height: 100%;
        padding-top: 10rpx;
        text-align: center;
        .text {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #262626;
        }
        .active-line {
          width: 52rpx;
          height: 6rpx;
          background: #f0250e;
          margin: 4rpx auto 0;
          opacity: 0;
        }
      }
      .active-tab {
        .text {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 600;
          color: #262626;
        }
        .active-line {
          opacity: 1;
        }
      }
    }
    .tab-hold-place {
      width: 100%;
      height: 9.6vw;
    }
  }
  .goods-swiper {
    width: 100%;
    height: 750rpx;
    background-color: #fff;
    position: relative;
    swiper {
      width: 100%;
      height: 100%;
    }
    image {
      width: 100%;
      height: 100%;
    }
    .goods-video {
      width: 100%;
      height: 100%;
    }
    .swiper-length {
      padding: 0.3vw 3.73vw;
      position: absolute;
      right: 3.2vw;
      bottom: 4.53vw;
      z-index: 22;
      background-color: rgba(0, 0, 0, 0.5);
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 600;
      color: #dddcdd;
      border-radius: 5vw;
    }
  }
}
</style>
